<template>
  <div class="LargeScreen_box">
    <div class="LargeScreen" :style="LargeScreen_style" >
        <div class="LargeScreen_header">
            <div class="overview">
                <div class="info">
                    <div class="desc">安全运行天数</div>
                    <div class="data" >
                        <dv-digital-flop :config="config_security_days" style="width:200px;height:50px;" />
                        <span class="unit">项</span>
                    </div>
                </div>
                <div class="image">
                    <animation :urlT="0"></animation>
                </div>
            </div>
            <div class="overview">
                <div class="info">
                    <div class="desc">未来15天预诊断</div>
                    <div class="data">
                        <dv-digital-flop :config="config_predict_15days" style="width:200px;height:50px;" />
                        <span class="unit">项</span>
                    </div>
                </div>
                <div class="image">
                    <animation :urlT="1"></animation>
                </div>
            </div>
            <div class="overview">
                <div class="info">
                    <div class="desc">可充电量</div>
                    <div class="data">
                        <dv-digital-flop :config="config_rechargeable_power" style="width:200px;height:50px;" />
                        <span class="unit">kwh</span>
                    </div>
                </div>
                <div class="image">
                   <animation :urlT="2"></animation>
                </div>
            </div>
            <div class="overview">
                <div class="info">
                    <div class="desc">可放电量</div>
                    <div class="data">
                        <dv-digital-flop :config="config_dischargeable_power" style="width:200px;height:50px;" />
                        <span class="unit">kwh</span>
                    </div>
                </div>
                <div class="image">
                    <animation :urlT="3"></animation>
                </div>
            </div>
            <div class="overview">
                <div class="info">
                    <div class="desc">实际冲满电量</div>
                    <div class="data">
                        <dv-digital-flop :config="config_current_power" style="width:200px;height:50px;" />
                        <span class="unit">kwh</span>
                    </div>
                </div>
                <div class="image">
                    <animation :urlT="4"></animation>
                </div>
            </div>
        </div>
        <div class="LargeScreen_conter">
            <div class="conter_left">
                <div class="realTime">
                    <div class="realTime_title">
                        <span>实时数据</span>
                        <span style="color: #40E6FE;font-size: 20px;cursor: pointer;margin-left: 15px;font-weight: 400;" @click="goRealTime">查看</span>
                    </div>
                    <div class="realTime_content">
                        <div class="total_box">
                          <div class="circular">
                            <dv-decoration-9 style="width: 120px; height: 120px" :dur="5">
                              <span class="num"> {{bigScreen.real_time_data.power.toFixed(2)}}kW </span>
                            </dv-decoration-9>
                          </div>
                          <div class="desc">
                            <span>总功率</span>
                          </div>
                        </div>
                        <div class="total_box">
                          <div class="circular">
                            <dv-decoration-9 style="width: 120px; height: 120px" :dur="5">
                              <span class="num"> {{bigScreen.real_time_data.voltage}}V</span>
                            </dv-decoration-9>
                          </div>
                          <div class="desc">
                            <span>总电压</span>
                          </div>
                        </div>
                        <div class="total_box">
                          <div class="circular">
                            <dv-decoration-9 style="width: 120px; height: 120px" :dur="5">
                              <span class="num"> {{bigScreen.real_time_data.current}}A</span>
                            </dv-decoration-9>
                          </div>
                          <div class="desc">
                            <span>总电流</span>
                          </div>
                        </div>
                        <div class="total_box">
                          <div class="circular">
                            <dv-decoration-9 style="width: 120px; height: 120px" :dur="5">
                              <span class="num"> {{bigScreen.real_time_data.SOC}}‱</span>
                            </dv-decoration-9>
                          </div>
                          <div class="desc">
                            <span>平均SOC</span>
                          </div>
                        </div>
                        <div class="total_box">
                          <div class="circular">
                            <dv-decoration-9 style="width: 120px; height: 120px" :dur="5">
                              <span class="num"> {{bigScreen.real_time_data.SOH}}‱</span>
                            </dv-decoration-9>
                          </div>
                          <div class="desc">
                            <span>平均SOH</span>
                          </div>
                        </div>
                    </div>
                </div>
                <div class="runningState">
                    <div class="runningState_title">
                        <span>运行状态</span>
                        <span style="color: #40E6FE;font-size: 20px;cursor: pointer;margin-left: 15px;font-weight: 400;" @click="goRealTime">查看</span>
                    </div>
                    <div class="runningState_content">
                        <div class="runningState_box" v-for="(r,i) in getStatus_data(status_page,bigScreen.status)" :key="r">
                            <div class="image">
                                <img v-if="r.name" src="../../assets/img/LargeScreen/电池.png" >
                            </div>
                            <div class="info" v-if="r.name">
                                <div class="t1">{{r.name}}</div>
                                <div class="t2">静置</div>
                            </div>
                            <div class="status_page" v-if="i==3">
                                <span v-if="status_page>1" @click="setStatus_page(-1)">上一页</span>
                                <span v-if="r.nextPage"  @click="setStatus_page(1)">下一页</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="realTimeWarning">
                    <div class="realTimeWarning_title">
                        实时预警
                    </div>
                    <div class="realTimeWarning_content">
                        <dv-scroll-board :config="realTimeWarningConfig" @click="test" style="width:637px;height:330px" />
                    </div>
                </div>
            </div>
            <div class="conter_content">
                <div class="detection_btn_box" @click="cloud_detection()">
                    <img src="../../assets/img/LargeScreen/盾牌.png" >
                    <div class="">
                        <span class="num">98</span>
                        <span class="btn_tip">点击立即检测</span>
                    </div>
                </div>
                <div class="selectZone">
                    <div class="select_box">
                        <span class="selectZone_title">实时守护中</span>
                        <div class="selectAdder">
                            <a-cascader class="selectAdderCascader" :options="addrOptions" :popupStyle="{'background-color': '#000000','color':'#888'}" :load-data="loadData" change-on-select @change="onChange"  />
                            <div class="selectAdderShowTxt">
                                <span class="txt">{{adder || '城市站点选择'}}</span>
                                <a-icon class="icon" type="right" />
                            </div>
                        </div>
                        <div class="selectAdder">
                            <a-cascader class="selectAdderCascader" :options="unitOptions" :popupStyle="{'background-color': '#000000','color':'#888'}" :load-data="loadData2" change-on-select @change="onChange2" :disabled="!esStation_id"  />
                            <div class="selectAdderShowTxt">
                                <span class="txt">{{unit||'单元簇选择'}}</span>
                                <a-icon class="icon" type="right" />
                            </div>
                        </div>
                    </div>
                    <div class="selectZone_tip">
                        <span class="time">上次报告生成：2023-1-22 17:49:33</span>
                        <span class="lastTime" @click="goDiagnosis">查看上次报告</span>
                    </div>
                </div>
                <div class="map_box">
                    <div
                      id="echarts_map"
                      style="width: 1200px; height: 1000px; margin: 0 auto">
                      </div>
                   <!--   <div class="nanHai" v-if="!currentLevel">
                          <img src="../../assets/img/LargeScreen/nanhai.png" >
                      </div> -->
                </div>
                <div class="map_type">
                    <div class="">
                        <span class="e1 icon iconfont icon-zhenduan-shebeixinxi"></span>
                        <span class="desc">重度异常</span>
                    </div>
                    <div class="">
                        <span class="e2 icon iconfont icon-zhenduan-shebeixinxi"></span>
                        <span class="desc">中度异常</span>
                    </div>
                    <div class="">
                        <span class="e3 icon iconfont icon-zhenduan-shebeixinxi"></span>
                        <span class="desc">轻度异常</span>
                    </div>
                    <div class="">
                        <span class="e4 icon iconfont icon-zhenduan-shebeixinxi"></span>
                        <span class="desc">储能正常</span>
                    </div>
                </div>
                <div class="banquan" style="text-align: center;font-size: 24px;color: #999;padding-top: 24px;padding-left: 350px;">
                    版权所有©2023 冠盖雄关™ 大数据预警平台
                </div>
            </div>
            <div class="conter_right">
                <div class="prediction">
                    <div class="prediction_title_box">
                        <span class="prediction_title">电池簇衰弱预测</span>
                        <div class="prediction_btn">
                            <span class="activ">衰弱预测</span>
                            <span>退役倒计时</span>
                        </div>
                    </div>
                    <div class="prediction_content">
                        <div
                          id="prediction"
                          style="width: 640px; height: 380px; margin: 0 auto">
                          </div>
                          <div class="prediction_charts_btn">
                              <div class="prediction_charts_btn-box" v-for="res in [1,2,3,4,5,6]" :key="res">
                                <span class="icon"></span>  
                                <span class="pile">一簇</span>
                              </div>
                          </div>
                    </div>
                </div>
                <div class="distribution">
                    <div class="distribution_title_box">
                        <div class="distribution_title">
                            <span>空间分布</span>
                            <span style="color: #40E6FE;font-size: 20px;cursor: pointer;margin-left: 15px;font-weight: 400;" @click="go3D">查看</span>
                        </div>
                        <div class="distribution_btn">
                            <span class="activ">温度</span>
                            <span>温度准确性</span>
                        </div>
                    </div>
                    <div class="distribution_content">
                        <details_a :width='640' :height="500"></details_a>
                    </div>
                </div>
            </div>
            
        </div>
        
    </div>
    <div class="detection_box" v-if="show_detectionBox">
        <div class="detection_box_info">
            <div class="title">
                冠盖智能检测中
            </div>
            <div class="image">
                <img src="../../assets/img/LargeScreen/检测中.png" >
            </div>
            <div class="progress">
                <span class="adder">{{adder || '--'}}</span>
                <div class="progress_box">
                    <a-progress :percent="percent" :show-info="false" width="100%" status="active" size="small"/>
                </div>
                <span class="desc">预计还需{{estimatedTime}}</span>
            </div>
            <div class="close">
                <span @click="cancellation()">取消检测</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
// import 'echarts-gl'; 
import { mapState } from "vuex";
import axios from "axios";
import { getRequest,gets,get,add} from "@/services";
var chinaJson;
import t1 from "../../assets/img/LargeScreen/轻度.png";
import * as THREE from 'three'
// 
// require('')
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
import details_a from "./components/details_a.vue"
import animation from "./components/animation.vue"
let config = {
          number: [0],
          animationFrame:150,
          textAlign:'right'
      }
export default {
  name: "home",
  computed: {
    ...mapState("setting", ["pageMinHeight"]),
    minHeight() {
      return this.pageMinHeight ? this.pageMinHeight + "px" : "100vh";
    },
  },
  components: {
      details_a,animation
  },
  data() {
    return {
         camera: null,  //相机对象
          scene: null,  //场景对象
          renderer: null,  //渲染器对象
          mesh: null,  //网格模型对象Mesh
        show_detectionBox:false,
        realTimeWarningConfig:{
            headerBGC:'rgba(29,84,128,0.5);',
            evenRowBGC:'#0F1726',
            rowNum:5,
            headerHeight:50,
            oddRowBGC:'rgba(29,84,128,0.5);',
            header: ['<span style="color:#4DB2FF">序号</span>','<span style="color:#4DB2FF">生成预警时间</span>','<span style="color:#4DB2FF">诊断项</span>', '<span style="color:#4DB2FF">类型</span>', '<span style="color:#4DB2FF">等级</span>'],
            align:['center','center','center','center'],
            columnWidth:[67,200,150,150,90],
            data: []
        },
        prediction:{
        },
        LargeScreen_style: "",
        currentLevel: 0, //1 全国下省份, 2 省份下市区  3 县区
      currentClick: null,
        map_id:'',
      currentCityList: {},
      percent:0,
      addrOptions:[],
      unitOptions:[],
      adder:'',
      unit:'',
      esStation_id:'',
      esClusters_id:'',
      estimatedTime:'',
      time:null,
      bigScreen:{
          statistics:{},
          real_time_data:{}
      },
      status_page:1,
      config_security_days:{
          ...config
      },
      config_predict_15days:{
          ...config
      },
      config_rechargeable_power:{
          ...config,
          toFixed:2
      },
      config_dischargeable_power:{
          ...config,
          toFixed:2
      },
      config_current_power:{
          ...config,
          toFixed:2
      }
    };
  },
  beforeDestroy() {
      clearInterval(this.time)
  },
  created() {
      let _this = this
      let map_info = JSON.parse(localStorage.getItem('map_info') || '{}')
      this.currentLevel = map_info.currentLevel || 0
      this.currentClick = map_info.currentClick || null
      this.map_id = map_info.map_id || ''
      console.log(12345,this.currentLevel,this.currentClick);
      gets({},'bigScreen').then(({data})=>{
          if(data.code==20000){
              let bigScreen = data.data
              this.bigScreen = bigScreen
              localStorage.setItem('e_s_cluster_id',bigScreen.real_time_data.e_s_cluster_id);
              setTimeout(()=> {
                  this.config_security_days = {
                      ...this.config_security_days,
                      style:{
                          fontSize:36,
                          fill:'#40E6FE'
                      },
                      number:[bigScreen.statistics.security_days]
                  }
                  this.config_predict_15days = {
                      ...this.config_predict_15days,
                      style:{
                          fontSize:36,
                          fill:'#40E6FE'
                      },
                      number:[bigScreen.statistics.predict_15days]
                  }
                  this.config_rechargeable_power = {
                      ...this.config_rechargeable_power,
                      style:{
                          fontSize:36,
                          fill:'#40E6FE'
                      },
                      number:[+bigScreen.statistics.rechargeable_power]
                  }
                  this.config_dischargeable_power = {
                      ...this.config_dischargeable_power,
                      style:{
                          fontSize:36,
                          fill:'#40E6FE'
                      },
                      number:[+bigScreen.statistics.dischargeable_power]
                  }
                  this.config_current_power = {
                      ...this.config_current_power,
                      style:{
                          fontSize:36,
                          fill:'#40E6FE'
                      },
                      number:[+bigScreen.statistics.current_power]
                  }
              }, 500);
              let ldata = {
                  normal:{
                      c:'#16E6FF',
                      n:'正常'
                  },
                  light:{
                      c:'#FFE300',
                      n:'轻度'
                  },
                  moderate:{
                      c:'#FF6600',
                      n:'中度'
                  },
                  severe:{
                      c:'#FF2F4F',
                      n:'重度'
                  }
               }
              this.bigScreen.alarm.map((e,i)=>{
                  _this.realTimeWarningConfig.data.push([
                      `<span style="font-size:19px">${i+1}</span>`,`<span style="font-size:19px">${e.created_at}</span>`,`<span style="font-size:19px">${e.name}</span>`, `<span style="font-size:19px">${e.type}</span>`, `<span style="color:${ldata[e.level].c};font-size:19px">${ldata[e.level].n}</span>`
                  ])
              })
              this.$forUpdate()
          }
              _this.realTimeWarningConfig = {..._this.realTimeWarningConfig}
      })
    window.addEventListener("resize", this.handleResize);
    gets({},'region').then(({data})=>{
        if(data.code==20000){
            this.addrOptions = data.data.map(e=>{
                return {
                      value: e,
                      label: e,
                      l: 1,
                      isLeaf: false,
                }
            })
        }
    })
    // gets({},'provinceScreen')
  },
  beforeDestroy: function () {
    window.removeEventListener("resize", this.handleResize);
  },
  mounted() {
    this.handleResize();
    setTimeout(() => {
      // 使用刚指定的配置项和数据显示图表。
      var myChart = this.$echarts.init(
        document.getElementById("prediction")
      );
      // var myChart2 = this.$echarts.init(document.getElementById("areaMap"));
      // var myChart3 = this.$echarts.init(
      //   document.getElementById("rosePieChart")
      // );
      // // 使用刚指定的配置项和数据显示图表
      myChart.setOption({
            xAxis: {
                type: 'category',
                axisLabel: { rotate: 30 ,fontSize:20,padding:[10,0,0,0]},
                boundaryGap: true,
                data: ['02-27', '02-28', '03-1', '03-2', '03-3', '03-4', '03-5', '03-6', '03-7', '03-8', '03-9', '03-10', '03-11', '03-12','03-13'],
                axisPointer: {
                  type: 'shadow'
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6E7584'
              }
            }
          },
          grid: {
            left: 25,
            right: 35,
            bottom: 30,
            top: 60,
            containLabel: true,
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
                label:{
                    fontSize:20,
                }
            },
            padding: [5, 10],
            textStyle:{
                fontSize:20,
            }
          },
          yAxis: {
            name: 'SOH(%)',
            nameTextStyle:{
                fontSize:20,
                lineHeight:50,
            },
            nameGap:20,
            type: 'value',
            axisLine: {
              show: false,
              lineStyle: {
                color: '#6E7584'
              }
            },
            axisLabel: { fontSize:20},
            splitArea: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [{
            name: '标题',
            type: 'line',
            symbolSize: 0,
            lineStyle: {
              color: 'rgba(71,149,229,1)',
              width:3
            },
            // areaStyle: {
            //   color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            //     {
            //       offset: 0,
            //       color: 'rgba(71,149,229,.4)'
            //     },
            //     {
            //       offset: 1,
            //       color: 'rgba(71,149,229,0.4)'
            //     }
            //   ])
            // },
            data: ['100', '99.97', '99.98', '99.96', '99.93', '99.89', '99.84', '99.79', '99.69', '99.49', '99.19' ],
            animationDuration: 2000
          }]});
      // myChart2.setOption(this.areaMapData);
      // myChart3.setOption(this.rosePieChartData);
      window.addEventListener("resize", function () {
        myChart.resize();
        // myChart2.resize();
        // myChart3.resize();
      });
      this.init3D()
    }, 500);
    axios.get('/storage/map/china.json').then(res=>{
        chinaJson = res.data
        setTimeout(()=>this.initChartsMap(), 500);
    }) 
    // https://ess.guan-gai.com/storage/map/china.json
    // http://192.168.1.101:8080/storage/map/china.json
  },
  methods: {
      getStations(zone,type){
        return new Promise((resolve,reject)=>{
            gets({searchFields: 'zone:like',search: `zone:${zone}`,limit:66},'esStations').then(res=>{
                if(res.data.code==20000){
                    let sp = ['省','自治区','壮族','回族','维吾尔','特别行政区','市']
                    let ta = ['重庆','天津','北京','南京','上海']
                    let arr = res.data.data.data.map(e=>{
                        let nextZone=''
                        if(!zone){
                            nextZone=e.zone.split(sp[sp.findIndex(ee=>e.zone.search(ee)!=-1)])[0]
                        }else{
                            nextZone=e.zone.replace(/省|自治区|壮族|回族|维吾尔|特别行政区|重庆市|天津市|北京市|南京市|上海市/g,'').replace(zone,'').split('市')[0]
                            if(ta.findIndex(ee=>e.zone.search(ee)!=-1)==-1){
                               nextZone += '市'
                            } 
                        }
                        console.log(nextZone);
                        let info = {
                          name:e.name,
                          zone:nextZone,
                          type,
                          symbolSize:[80,120],
                          symbol:'image://',
                            value: [+e.lng,+e.lat],
                            
                    }
                        return info
                    })
                    resolve(arr)
                }else{
                    resolve([])
                }
            })  
        })
      },
      getAddrData(url){
        let data
        axios.get(url).then(res=>{
            data = res.data
        })
        console.log(123,data);
       function getData(){
           console.log(11112222,data);
            if(data){
                console.log(1111,data);
                return data
            }else{
                setTimeout(()=>{
                    console.log(2222);
                    return getData()
                }, 200);
            }
        }
        return getData()
      },
      cancellation(show_detectionBox=false){
        this.show_detectionBox=show_detectionBox
        clearInterval(this.time)
      },
      setStatus_page(e){
          this.status_page+=e
      },
      getStatus_data(page,data=[]){
          let temp = [...data]
          let arr = temp.slice((page-1)*4,page*4)
          for(let i=arr.length;i<4;i++){
              arr.push({})
          }
          if(temp.length>page*4){
              arr[3].nextPage = true
          }
          return arr
      },
      goRealTime(){
          this.$router.push('/realTime')
      },
      goDiagnosis(){
          gets({orderBy:'id',sortedBy:'desc'},'reports').then(({data})=>{
            this.$router.push('/home/diagnosis?id='+data.data.data[0].task_id)
          })
      },
      go3D(){
          this.$router.push('/home/3D')
      },
      test(e){
          this.$router.push(`/earlyWarning/details?id=${this.bigScreen.alarm[e.rowIndex].id}`);
      },
      cloud_detection(){
          if(!this.esClusters_id){
              this.$message.info('请先选择单元簇')
              return
          }
          clearInterval(this.time)
         this.show_detectionBox=true
         this.percent=0
         add({e_s_cluster_id:this.esClusters_id || 1},'cloud_detection').then(({data})=>{
             if(data.code==20000){
                 let estimate = data.data.estimate
                 let s = 20/estimate
                 this.time = setInterval(()=>{
                     this.percent+=s
                     let m = parseInt((estimate - this.percent*(estimate/100))/60)
                     this.estimatedTime = m+'分钟'
                     if(m==0){
                        let s = parseInt((estimate - this.percent*(estimate/100))%60)
                         this.estimatedTime = s+'秒'
                     }
                     
                     console.log(this.estimatedTime);
                     if(this.percent>=100){
                         this.estimatedTime = 0
                         clearInterval(this.time)
                         this.$router.push('/home/diagnosis?id='+data.data.id)
                     }
                 },200)
             }
         })
      },
      onChange2(e,es){
          console.log(e,es);
          let obj = es[es.length-1]
          if(obj.esClusters_id){
              this.esClusters_id = obj.esClusters_id
          }else{
              this.esClusters_id = ''
          }
          this.unit = e.join('')
      },
      onChange(e,es){
          console.log(e,es);
          let _this = this
          let obj = es[es.length-1]
          this.esClusters_id = ''
          if(obj.esStation_id){
              this.esStation_id = obj.esStation_id
              gets({limit:999,search:obj.esStation_id,searchFields:'e_s_station_id'},'esUnits').then(({data})=>{
                  if(data.code==20000){
                      _this.unitOptions = data.data.data.map(e=>{
                          return {
                                value: e.name,
                                label: e.name,
                                l: 1,
                                unit_id:e.id,
                                isLeaf: false,
                          }
                      })
                  }
              })
          }else{
              _this.esStation_id = ''
              _this.currentLevel = es.length
              _this.currentClick = obj.value.replace(/省|自治区|壮族|回族|维吾尔|特别行政区/g,'')
              console.log(_this.currentClick );
              try{
                  _this.currentLevel != 3 && _this.initChartsMap()
              }catch(e){
                  //TODO handle the exception
              }
          }
          this.adder = e.join('')
      },
      loadData2(selectedOptions) {
          console.log(111,selectedOptions);
          let _this = this
          const targetOption = selectedOptions[selectedOptions.length - 1];
          targetOption.loading = true;
          gets({search:targetOption.unit_id,searchFields:'e_s_unit_id'},'esClusters').then((res)=>{
              if(res.data.code==20000){
                  if(res.data.data.data.length){
                      targetOption.children = res.data.data.data.map(e=>{
                          let info = {
                                value: e.name,
                                label: e.name,
                                l: targetOption.l+1,
                                esClusters_id:e.id
                          }
                          return info
                      })
                  }else{
                      delete targetOption.isLeaf
                  }
                  targetOption.loading = false;
                  _this.unitOptions = [..._this.unitOptions];
              }
          })
        },
      loadData(selectedOptions) {
          console.log(222,selectedOptions);
          let _this = this
          const targetOption = selectedOptions[selectedOptions.length - 1];
          targetOption.loading = true;
          let rdata = {}
          if(targetOption.l==1){
              rdata.province = targetOption.value
          }
          if(targetOption.l==2){
              rdata.province = selectedOptions[selectedOptions.length - 2].value
              rdata.city = targetOption.value
          }
          if(targetOption.l==3){
              gets({search:this.adder,searchFields:'zone'},'esStations').then((res)=>{
                  if(res.data.code==20000){
                      if(res.data.data.data.length){
                          targetOption.children = res.data.data.data.map(e=>{
                              let info = {
                                    value: e.name,
                                    label: e.name,
                                    l: targetOption.l+1,
                                    esStation_id:e.id
                              }
                              return info
                          })
                      }else{
                          delete targetOption.isLeaf
                      }
                      targetOption.loading = false;
                      _this.addrOptions = [..._this.addrOptions];
                  }
              })
              return
          }
          gets(rdata,'region').then(({data})=>{
              if(data.code==20000){
                  targetOption.children = data.data.map(e=>{
                      let info = {
                            value: e,
                            label: e,
                            l: targetOption.l+1,
                      }
                      info.isLeaf=false
                      return info
                  })
                  if(data.data.length==0){
                      gets({search:this.adder,searchFields:'zone'},'esStations').then((res)=>{
                          if(res.data.code==20000){
                              if(res.data.data.data.length){
                                  targetOption.children = res.data.data.data.map(e=>{
                                      let info = {
                                            value: e.name,
                                            label: e.name,
                                            l: targetOption.l+1,
                                            esStation_id:e.id
                                      }
                                      return info
                                  })
                              }else{
                                  delete targetOption.isLeaf
                              }
                              // _this.esStation_id = e.id
                              targetOption.loading = false;
                              _this.addrOptions = [..._this.addrOptions];
                          }
                      })
                      return
                  }
                  _this.esStation_id = ''
                  targetOption.loading = false;
                  this.addrOptions = [...this.addrOptions];
              }
          })
        },
      init3D() {
          //创建场景
              this.scene = new THREE.Scene();
              
          /**
           * 创建网格模型
           */
          let geometry = new THREE.BoxGeometry(40, 40, 40); //创建一个立方体几何对象Geometry
          let material = new THREE.MeshLambertMaterial({
            color: 0x0000ff
          }); //材质对象Material 可以自定义颜色
          let mesh = []//网格模型对象Mesh
          for(let k=0;k<3;k++){
              for(let i=0;i<9;i++){
                  let m = new THREE.Mesh(geometry, material)
                  let x,y,z;
                  if(i<3){
                      x=50*i
                      y=0
                      z=50*k
                  }
                  if(i>=3 && i<6){
                      x=50*(i-3)
                      y=50
                      z=50*k
                  }
                  if(i>=6 && i<9){
                      x=50*(i-6)
                      y=100
                      z=50*k
                  }
                  m.position.set(x,y,z)
                  this.scene.add(m); 
              }
          }
          // this.mesh =  new THREE.Mesh(geometry, material)
          //更改位置
          // this.mesh.position.set(50,0,0)
          
          // this.scene.add(this.mesh); //网格模型添加到场景中
          /**
           * 光源设置
           */
          //点光源
          let point = new THREE.PointLight(0xffffff);
          point.position.set(400, 200, 300); //点光源位置1
          let point2 = new THREE.PointLight(0xffffff);
          point2.position.set(-400, -200, -300); //点光源位置2
          this.scene.add(point); //点光源添加到场景中
          this.scene.add(point2); //点光源添加到场景中
          //环境光
          let ambient = new THREE.AmbientLight(0x444444);
          this.scene.add(ambient);
          // console.log(scene)
          // console.log(scene.children)
          /**
           * 相机设置
           */
          let container = document.getElementById('distribution');
          let width = 640; //窗口宽度
          let height = 500; //窗口高度
          let k = width / height; //窗口宽高比
          let s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
          //创建相机对象
          this.camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
          this.camera.position.set(200, 300, 200); //设置相机位置
          this.camera.lookAt(this.scene.position); //设置相机方向(指向的场景对象)
          // this.camera = new THREE.PerspectiveCamera(70, container.clientWidth/container.clientHeight, 0.01, 10);
          //     this.camera.position.z = 1;
          /**
           * 创建渲染器对象
           */
          this.renderer = new THREE.WebGLRenderer();
          this.renderer.setSize(width, height);//设置渲染区域尺寸
          this.renderer.setClearColor(0xffffff, 0); //设置背景颜色
          container.appendChild(this.renderer.domElement); //body元素中插入canvas对象
          //执行渲染操作   指定场景、相机作为参数
          // this.renderer.render(this.scene, this.camera);
          
          //创建轨道控制器
          const controls = new OrbitControls(this.camera,this.renderer.domElement)
          
          //添加坐标辅助器
          const axesHelper = new THREE.AxesHelper( 500 );
          this.scene.add(axesHelper)
          
          //渲染
          let render = ()=>{
              this.renderer.render(this.scene, this.camera);
                requestAnimationFrame(render)
          }
          render()
      },
    handleResize() {
      if (document.documentElement.clientWidth < 1000) {
        return;
      }
      let s = (document.documentElement.clientWidth * 1.0) / 3260;
      let d = (s * 100 - 100) / 2;
      let style=`width:${3260*s-100}px;min-height:${1394*s}px;`
      this.LargeScreen_style = `transform: translateX(${d}%) translateY(${d}%) scale(${s});${style}`;
    },
    initChartsMap_t(myChart,chinan,regionsList,scatterdata_zone,scatterdata_type,map_id){
        this.getStations(scatterdata_zone,scatterdata_type).then(scatterdata=>{
            console.log(123,scatterdata);
             let option = {
                 // 背景颜色
                 // backgroundColor: "#0F1726",
                 // 提示浮窗样式
                 tooltip: {
                   show: true,
                   trigger: "item",
                   alwaysShowContent: false,
                   backgroundColor: "#0C121C",
                   borderColor: "rgba(0, 0, 0, 0.16);",
                   hideDelay: 100,
                   triggerOn: "mousemove",
                   enterable: true,
                   textStyle: {
                     color: "#DADADA",
                     fontSize: "14",
                     width: 20,
                     height: 30,
                     overflow: "break",
                   },
                   showDelay: 100
                 },
               geo: {
                 map: chinan, //china可以显示右下加南海诸岛，别的名称无法显示
                 roam: false,
                 zoom: 1.2,
                 aspectScale: 0.8, // 拉伸地图 值为0-1
                 regions: regionsList,
                 label: {
                   // show: true,
                   // color: '#fff',
                   // 通常状态下的样式
                   normal: {
                     show: true,
                     textStyle: {
                       color: "#fff",
                     },
                   },
                   // 鼠标放上去的样式
                   emphasis: {
                     textStyle: {
                       color: "#fff",
                     },
                   },
                 },
        //          emphasis: { // 设置鼠标移上去hover效果
        //            // show: true,
        //            label: {
        //              color: '#000',
        //            }
        
        //          },
                 // 地图区域的样式设置
                 itemStyle: {
                   normal: {
                     borderColor: "rgba(15, 60, 138, 1)",
                     borderWidth: 2,
                     areaColor: {
                       type: "radial",
                       x: 0.5,
                       y: 0.5,
                       r: 0.8,
                       colorStops: [
                         {
                           offset: 0,
                           color: "rgba(10, 16, 29, 0)", // 0% 处的颜色
                           },
                         {
                           offset: 1,
                           color: "rgba(10, 16, 29, 1)", // 100% 处的颜色
                         },
                       ],
                       globalCoord: false, // 缺省为 false
                     },
                     
                     shadowColor: "rgba(15, 60, 138, 1)",
                     shadowOffsetX:2,
                     shadowOffsetY:10,
                     shadowBlur: 5
        
                   },
                   // 鼠标放上去高亮的样式
                   emphasis: {
                     areaColor: "#389BB7",
                     borderWidth: 0,
                   },
                 },
               },
               series: [
                       {
                         type: 'scatter',   
                         coordinateSystem: 'geo', //  指明绘制在geo坐标系上
                         //定以一个空数组后期点击的时候往里面添加新数据
                         data:scatterdata,
                         tooltip:{
                             textStyle:{
                                 fontSize:22
                             }
                         }
                       },
                   ]
             }
             
             // console.log(option)
             myChart.setOption(option)
             localStorage.setItem('map_info',JSON.stringify({currentLevel:this.currentLevel,currentClick:this.currentClick,map_id:map_id}));
             myChart.off('click') //解决点击地图会触发两次问题
             myChart.on('click', (params) => {
               if(params.componentType=="series"){
                this.currentLevel = params.data.type == '省份' ? 1 : params.data.type == '城市' ? 2  : params.data.type == '县区' ? 3 : 0   
               this.currentClick = params.data.zone
               }else{
                this.currentLevel = params.region.type == '省份' ? 1 : params.region.type == '城市' ? 2  : params.region.type == '县区' ? 3 : 0
                this.currentClick = params.name
               }
               console.log(111,this.currentClick,this.currentLevel)
               this.currentLevel != 3 && this.initChartsMap()  //县区下没有别的级别
             })
         })
    },
    initChartsMap(){
        var myChart = this.$echarts.init(
          document.getElementById("echarts_map")
          
        );
        var chinan= 'china'
        let regionsList = []
         let scatterdata_zone =  ''
         
              //全国下省份
              if(!this.currentLevel) {
                 console.log(111,chinaJson);
                regionsList = chinaJson.features.map((item) => ({
                  name: item.properties.name,
                  type: '省份',
                  label:{
                    fontSize:20
                  },
                  itemStyle: {
                    color: 'rgba(10, 16, 29, 1)',
                    areaColor: 'rgba(10, 16, 29, 1)',
                    borderColor: '#C3F4F4',
                    borderWidth:2

                  }
                }))  //地图上要显示的区域以及颜色
                regionsList.push(  {
                    name: "南海诸岛",
                    label:{
                      fontSize:20
                    },
                    itemStyle: {
                      color: 'rgba(10, 16, 29, 1)',
                      areaColor: 'rgba(10, 16, 29, 1)',
                      borderColor: '#C3F4F4',
                      borderWidth:2
                    
                    }
                  }) 
          
                let outProvince = [] //数组定义在这里, 可以在地图上去除部分省份 =》 ['江苏', '江西']
                let objMap = {
                  ...chinaJson,
                  features: chinaJson.features.filter((item) => !outProvince.includes(item.properties.name)) //这里可以过滤不需要展示省份，可以和regionsList联动使用
                }
                echarts.registerMap('china', objMap)  //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
                   this.initChartsMap_t(myChart,chinan,regionsList,scatterdata_zone,'省份')
                   return
              }
              //省份下市区
              if(this.currentLevel == 1) {
                  chinan = 'chinaJson'
                //console.log(this.currentLevel, this.currentClick)
                let addrdata = chinaJson.features.filter((item) => this.currentClick == item.properties.name)[0].properties
                let id =this.map_id || addrdata.id
                scatterdata_zone = addrdata.name
                console.log(addrdata.name);
                //console.log(id)  //找出  @/core/map/china.json 里面内蒙古id  同事在此路径geometryProvince文件下  id.json就是对应该省份对应的市级数据
                
                axios.get(`/storage/map/geometryProvince/${id}.json`).then(res=>{
                    this.map_id=''
                    let cityList = res.data//require(`@/pages/home/map/geometryProvince/${id}.json`) //获取城市数据
                    console.log(777,cityList);
                    regionsList =  cityList.features.map((item) => ({
                      name: item.properties.name,
                      type: '城市',
                      label:{
                        fontSize:20
                      },
                      itemStyle: {
                        color: 'rgba(222, 224, 232, 1)',
                        areaColor: 'rgba(10, 16, 29, 1)',
                        borderColor: '#C3F4F4',
                        borderWidth:2
                      }
                    }))
                    this.currentCityList = cityList
                    //console.log(regionsList)
                    let outCityList = [] //剔除不需要城市
                    let objMap = {
                      ...chinaJson,
                      features: cityList.features.filter((item) => !outCityList.includes(item.properties.name)) //这里可以过滤不需要展示城市，可以和regionsList联动使用
                    }
                    echarts.registerMap('chinaJson', objMap)  //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
                    this.initChartsMap_t(myChart,chinan,regionsList,scatterdata_zone,'城市',id)
                })
                return
              }
              //市区下县区
              if(this.currentLevel == 2) {
                  chinan = 'chinaJson'
                  let outAreaList = [] //剔除不需要县区
                //console.log(this.currentLevel, this.currentClick, this.currentCityList)
                let addrdata =((this.currentCityList.features || []).filter((item) => this.currentClick == item.properties.name)[0] || {}).properties||{};
                let id =this.map_id|| addrdata.id
                console.log(addrdata);
                scatterdata_zone = addrdata.name || this.currentClick
                axios.get(`/storage/map/geometryCouties/${id}00.json`).then(res=>{
                    this.map_id = ''
                    let areaList = res.data
                //require(`@/pages/home/map/geometryCouties/${id}00.json`) //获取区县数据, 这里加${id}00  是因为查出来id没有00  但是json文件是有的所以拼接了一下
                //console.log(areaList)
                regionsList =  areaList.features.map((item) => ({
                  name: item.properties.name,
                  type: '县区',
                  label:{
                    // color:'rgba(0,0,0,0)',
                    fontSize:20
                  },
                  emphasis:{
                      label:{
                        // color:'rgba(0,0,0,0)'
                      },
                  },
                  itemStyle: {
                    color: 'rgba(222, 224, 232, 0)',
                    areaColor: 'rgba(10, 16, 29, 1)',
                    borderColor: '#C3F4F4',
                    borderWidth:2
                  }
                }))
         
                let objMap = {
                  ...chinaJson,
                  features: areaList.features.filter((item) => !outAreaList.includes(item.properties.name)) //这里可以过滤不需要展示县区，可以和regionsList联动使用
                }
                echarts.registerMap('chinaJson', objMap)  //chinaJSon自定义名称，但是无法显示右下角南海诸岛， 可以设置成china
                
                this.initChartsMap_t(myChart,chinan,regionsList,scatterdata_zone,'县区',id)
                })
                return
              }
         
        
    }
  }
};
</script>

<style  lang="less">
   
    
    .detection_box{
        position: fixed;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0,0,0,0.33);
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 99999;
        .detection_box_info{
            width: 500px;
            height: 462px;
            box-shadow: 0 0 100px #022641;
            border-radius: 10px;
            text-align: center;
            background-image: linear-gradient(#032038 0%,#080811 30%,#080811 70%, #032038 100%);
            .title{
                font-size: 22px;
                font-family: PingFang SC;
                font-weight: 550;
                color: #FFFFFF;
                padding: 30px 0;
            }
            .image{
                img{
                    width: 250px;
                }
            }
            .progress{
                margin-top: 20px;
                .progress_box{
                  padding-left: 30px;
                  padding-right: 30px;
                }
                .adder,.desc{
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                    margin: 5px 0;
                    display: block;
                }
            }
            .close{
                margin-top: 30px;
                span{
                    cursor: pointer;
                    display: inline-block;
                    width: 150px;
                    height: 36px;
                    line-height: 32px;
                    font-size: 16px;
                    box-sizing: border-box;
                    background: rgba(8,8,17,0.46);
                    border: 2px solid #2878FF;
                    border-radius: 18px;
                    box-shadow: 0 0 20px #2878FF;
                }
            }
        }
    }
    .dv-scroll-board{
        .header{
            font-size: 22px;
        }
        .rows{
            
            .row-item {
                font-size: 22px;
            }
        } 
    }
.LargeScreen_box {
  width: 100%;
  height: calc(100vh - 65px);
  background: #0F1726;
  overflow: auto;
  color: #fff;
  .LargeScreen {
    width: 3240px;
    height: 100%;
    padding-top: 30px;
    .LargeScreen_header{
        margin: 0 20px;
        height: 180px;
        display: flex;
        background: linear-gradient(rgba(2,38,65,1),rgba(2,38,65,0));
        box-shadow: 0px 10px 50px 0px rgba(2,38,65,.9);
        border-radius: 10px;
        width: 3160px;
        .overview{
            flex: 1;
            justify-content: center;
            display: flex;
            align-items: center;
            border-right: 2px solid #fff;
            border-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #00bbf2 50%, rgba(255, 255, 255, 0) 100%) 2 2 2 2;
            .image{
                width: 23
                0px;
                height: 126px;
                // img{
                //     width: 100%;
                //     height: 100%;
                // }
            }
            .info{
                margin-right: 18px;
                text-align: right;
                .desc{
                    font-size: 20px;
                    font-family: PingFang SC;
                    font-weight: 400;
                    color: #9ACBEA;
                    line-height: 36px;
                }
                .data{
                    display: flex;
                    .num{
                        font-size: 36px;
                        font-family: Alte DIN 1451 Mittelschrift;
                        font-weight: 400;
                        color: #40E6FE;
                        line-height: 36px;
                    }
                    .unit{
                        font-size: 20px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #9ACBEA;
                        line-height: 36px;
                        height: 36px;
                        margin-left: 5px;
                        display: block;
                        padding-top: 5px;
                    }
                }
            }
        }
        .overview:nth-last-of-type(1){
            border: none;
        }
    }
    .LargeScreen_conter{
        display: flex;
        .conter_left{
            width: 657px;
            margin: 20px 20px;
            .realTime{
                .realTime_title{
                    font-size: 25px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FEFEFE;
                    line-height: 55px;
                    padding-left:40px;
                    padding-bottom: 20px;
                }
                .realTime_content{
                    display: flex;
                    flex-wrap: wrap;
                    .total_box{
                        width: 33.3%;
                        margin-bottom: 35px;
                        .circular{
                            display: flex;
                            justify-content: center;
                            .num{
                                font-size: 22px;
                            }
                        }
                        .desc{
                            margin-top: 10px;
                            font-size: 22px;
                            font-family: PingFang SC;
                            font-weight: 200;
                            color: #FFFFFF;
                            text-align: center;
                        }
                    }
                }
            }
            .runningState{
                height: 337px;
                .runningState_title{
                    font-size: 25px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FEFEFE;
                    line-height: 55px;
                    padding-left:40px;
                    padding-bottom: 20px;
                }
                .runningState_content{
                    display: flex;
                    flex-wrap: wrap;
                    .runningState_box{
                        width: 50%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 18px 0;
                        box-sizing: border-box;
                        position: relative;
                        .status_page{
                            display: flex;
                            justify-content: flex-end;
                            padding-top: 10px;
                            padding-right: 50px;
                            position: absolute;
                            right: 0;
                            top: 95%;
                            span{
                                font-size: 20px;
                                color: #2878FF;
                                margin-left: 20px;
                                cursor: pointer;
                            }
                        }
                        .image{
                            width: 62px;
                            height: 90px;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .info{
                            margin-left: 28px;
                            text-align: center;
                            .t1{
                                width: 100%;
                                font-size: 23px;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #FFFFFF;
                            }
                            .t2{
                                width: 100%;
                                font-size: 19px;
                                margin-top: 10px;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #74F5F6;
                            }
                        }
                    }
                    .runningState_box:nth-of-type(1){
                        border-bottom: 2px solid #fff;
                        border-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #00bbf2 80%) 2 2 2 2;
                    }
                    .runningState_box:nth-of-type(2){
                        border-left: 2px solid #fff;
                        border-image: linear-gradient(rgba(255, 255, 255, 0) 0%, #00bbf2 80%) 2 2 2 2;
                    }
                    .runningState_box:nth-of-type(3){
                        border-right: 2px solid #fff;
                        border-image: linear-gradient(#00bbf2 0%, rgba(255, 255, 255, 0) 80%) 2 2 2 2;
                    }
                    .runningState_box:nth-of-type(4){
                        border-top: 2px solid #fff;
                        border-image: linear-gradient(90deg,#00bbf2 0%, rgba(255, 255, 255, 0) 80%, ) 2 2 2 2;
                    }
                }
            }
            .realTimeWarning{
                
                .realTimeWarning_title{
                    font-size: 25px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #FEFEFE;
                    line-height: 55px;
                    padding-left:40px;
                    padding-bottom: 20px;
                }
                .realTimeWarning_content{
                    font-size: 22px;
                    padding-left: 20px;
                }
            }
        }
        .conter_content{
            margin-left: 60px;
            margin-top: 40px;
            position: relative;
            .detection_btn_box{
                position: absolute;
                right: -230px;
                top: 20px;
                height: 190px;
                cursor: pointer;
                img{
                    height: 190px;
                }
                div{
                    position: absolute;
                    left: 0;
                    width: 100%;
                    text-align: center;
                    top: 40px;
                    .num{
                        display: block;
                        font-size: 40px;
                        font-family: Alte DIN 1451 Mittelschrift;
                        font-weight: 400;
                        color: #FFFFFF;
                    }
                    .btn_tip{
                        display: block;
                        font-size: 17px;
                        font-family: PingFang SC;
                        font-weight: 400;
                        color: #74F5F6;
                    }
                }
            }
            .selectZone{
                padding-left: 30px;
                .select_box{
                    display: flex;
                    align-items: center;
                    .selectZone_title{
                        line-height: 55px;
                        font-size: 26px;
                        font-weight: bold;
                    }
                    .selectAdder{
                        height: 30px;
                        background: rgba(40,120,255,0.2);
                        border-radius: 15px;
                        margin-left: 20px;
                        position: relative;
                        padding: 0 20px;
                        line-height: 30px;
                        .selectAdderShowTxt{
                            display: flex;
                            align-items: center;
                            font-size: 19px;
                            font-family: PingFang SC;
                            font-weight: 400;
                            opacity: .6;
                            color: #FFFFFF;
                            .txt{
                                
                            }
                            .icon{
                                width: 30px;
                                margin-left: auto;
                            }
                        }
                        .selectAdderCascader{
                            width: 100%;
                            height: calc(100% + 10px);
                            opacity: 0;
                            position: absolute;
                            top: 0;
                            z-index: 1;
                            left: 0;
                        }
                    }
                }
                .selectZone_tip{
                    font-size: 20px;
                    margin-top: 20px;
                    .time{
                        color: #FEFEFE;
                    }
                    .lastTime{
                        color: #74F5F6;
                        margin-left: 10px;
                        cursor: pointer;
                    }
                }
            }
            .map_box{
                width: 1200px;
                height: 1000px;
                margin-left: 200px;
                position: relative;
                .nanHai{
                    position: absolute;
                    right: 20px;
                    bottom: 20px;
                    width: 100px;
                    z-index: 999;
                    img{
                        width: 150px;
                    }
                }
            }
            .map_type{
                display: flex;
                justify-content: flex-end;
                font-size: 22px;
                .icon{
                    font-size: 24px;
                    margin-right: 10px;
                }
                div{
                    margin-left: 40px;
                }
                .e1{
                    color: #FF2323;
                }
                .e2{
                    color: #FF6600;
                }
                .e3{
                    color: #FFE300;
                }
                .e4{
                    color: #16E6FF;
                }
            }
        }
        .conter_right{
            width: 657px;
            margin: 20px 20px;
            margin-left: 300px;
            .prediction{
                .prediction_title_box{
                    display: flex;
                    align-items: center;
                    height: 100px;
                    justify-content: space-between;
                    .prediction_title{
                        font-size: 25px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #FEFEFE;
                        line-height: 55px;
                        padding-left:40px;
                    }
                    .prediction_btn{
                        span{
                            font-size: 19px;
                            line-height: 36px;
                            display: inline-block;
                            background: #142A51;
                            color: #164BA3;
                            border: 1px solid #164BA3;
                            border-radius: 18px;
                            height: 36px;
                            padding: 0 20px;
                            min-width: 100px;
                            text-align: center;
                        }
                        span:nth-last-of-type(1){
                            margin:0 18px;
                        }
                        .activ{
                            border: 1px solid #2878FF;
                            color: rgba(255,255,255,0.7);
                        }
                    }
                }
            
                .prediction_content{
                    .prediction_charts_btn{
                        display: flex;
                        padding-left: 30px;
                        .prediction_charts_btn-box{
                            flex:1;
                            display: flex;
                            align-items: center;
                            .icon{
                                display: inline-block;
                                width: 21px;
                                height: 21px;
                                border: 5px solid red;
                                border-radius: 50%;
                            }
                            .pile{
                                font-size: 19px;
                                margin-left: 10px;
                            }
                        }
                    }
                }
            }
            .distribution{
                padding-top: 50px;
                .distribution_title_box{
                    display: flex;
                    align-items: center;
                    height: 100px;
                    justify-content: space-between;
                    .distribution_title{
                        font-size: 25px;
                        font-family: PingFang SC;
                        font-weight: bold;
                        color: #FEFEFE;
                        line-height: 55px;
                        padding-left:40px;
                        padding-bottom: 20px;
                    }
                    .distribution_btn{
                        span{
                            font-size: 19px;
                            line-height: 36px;
                            display: inline-block;
                            background: #142A51;
                            color: #164BA3;
                            border: 1px solid #164BA3;
                            border-radius: 18px;
                            height: 36px;
                            padding: 0 20px;
                            min-width: 100px;
                            text-align: center;
                        }
                        span:nth-last-of-type(1){
                            margin:0 18px;
                        }
                        .activ{
                            border: 1px solid #2878FF;
                            color: rgba(255,255,255,0.7);
                        }
                    }
                }
            }
        }
    }
  }
}

/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/

.LargeScreen_box::-webkit-scrollbar {
  width: 10px; /*对垂直流动条有效*/
  height: 10px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
.LargeScreen_box::-webkit-scrollbar-track {
  background-color: rgb(50, 173, 182);
  border-radius: 2.5px;
}

/*定义滑块颜色、内阴影及圆角*/
.LargeScreen_box::-webkit-scrollbar-thumb {
  border-radius: 7px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #e8e8e8;
}
</style>
